<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/user.css">
</head>
<body>
	<div class="info">
		<div class="person">
			<img src="${pageContext.request.contextPath }/images/head.png">
			<p>${user.utel }，您好！</p>
		</div>
		<div class="cash">
			<div class="left">
				<h3>账户余额</h3>
				<h2>${user.umoney }元</h2>
			</div>
			<div class="opera">
				<button type="button" data-toggle="modal" data-target="#payCash"
					class="btn btn-warning">充值</button>
				<button type="button" data-toggle="modal" data-target="#getCash"
					class="btn btn-primary">提现</button>
			</div>
		</div>
	</div>
	<div class="record">
		<h1>我的消费记录</h1>
		<table class="table table-striped" id="records">
			<thead>
				<tr>
					<th>交易时间</th>
					<th>交易类型</th>
					<th>金额</th>
					<th>结余</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<ul class="pager">
			<li id="pre" class="disabled"><a href="javascript:preRecords()">上一页</a>
			</li>
			<li id="next" class=""><a href="javascirpt:nextRecords()">下一页</a>
			</li>
		</ul>
	</div>

	<div class="modal fade" id="getCash" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">提现</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<input type="tel" class="form-control" name="getCash"
							placeholder="请输入提现金额">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" id="getSubmit" class="btn btn-primary">确认提现</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<div class="modal fade" id="payCash" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">充值</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<input type="tel" class="form-control" name="payCash"
							placeholder="请输入充值金额">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" id="paySubmit" class="btn btn-primary">确认充值</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<input class="hidden" id="number" value="${pageNumber }">
	<script type="text/javascript">
		var page = 1;
		var total = 0;
		var number = $("#number").val();
		$(document).ready(function() {
			loadRecords("user/record", 1);

			$("#getSubmit").click(function() {
				var cash = $("input[name='getCash']").val();
				if (cash > 0) {
					cashOpera("user/cash", "get", cash);
					$("#getCash").modal("hide");
				} else {
					alert("请输入正确金额！");
				}

			});

			$("#paySubmit").click(function() {
				var cash = $("input[name='payCash']").val();
				if (cash > 0) {
					cashOpera("user/cash", "pay", cash);
					$("#payCash").modal("hide");
				} else {
					alert("请输入正确金额！");
				}

			});

		});
		function preRecords() {
			if (page > 1) {
				loadRecords("user/record", page - 1);
			}
		}
		function nextRecords() {
			var maxPage = parseInt(total % number == 0 ? total / number : total
					/ number + 1);
			if (page < maxPage) {
				loadRecords("user/record", page + 1);
			}

		}
	</script>
</body>
</html>